<!--
  Generated template for the PersonalInfoPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar no-border>
      <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
      </button>
    <ion-title>个人信息</ion-title>
  
  <ion-buttons end>
      <button ion-button color="white" (click)="editButtonPressed()">
          {{buttonTitle}}
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content no-padding no-margin >
<ion-list>
  <ion-item no-lines>
    <!-- <ion-avatar item-start (click)="openCamera()">
        <img [src]="info.avatar">
    </ion-avatar> -->
    <img-lazy-load item-start default="assets/imgs/author_logo2.png" src="{{info.avatar}}" (click)="openCamera()"></img-lazy-load>
    <div float-left>
      <h3>{{info.nickName}}</h3>
      <p>{{info.userName}}</p>
      </div>
  </ion-item>

  <ion-item style="margin-top:20px;">
    <ion-icon name="paper-plane" ios="ios-paper-plane-outline" md="ios-paper-plane-outline" item-start color="primary"></ion-icon>
    <ion-label>姓名</ion-label>
    <ion-note item-end *ngIf="!isEditMode">{{info.nickName}}</ion-note>
    <ion-input item-end *ngIf="isEditMode" type="text" maxlength="20" minlength="6" placeholder="请输入昵称" [(ngModel)]="info.nickName" clearInput="true"></ion-input>
  </ion-item>

  <ion-item>
    <ion-icon name="mail" ios="ios-mail-outline" md="ios-mail-outline" item-start color="primary"></ion-icon>
    <ion-label>邮箱</ion-label>
    <ion-note item-end *ngIf="!isEditMode">{{info.email}}</ion-note>
    <ion-input item-end *ngIf="isEditMode" type="email" maxlength="40" minlength="6" placeholder="请输入邮箱" [(ngModel)]="info.email" clearInput="true"></ion-input>
  </ion-item>

  <ion-item>  
    <ion-icon name="female" item-start color="primary"></ion-icon>
    <ion-label>性别</ion-label>
    <ion-note item-end *ngIf="!isEditMode">{{info.gender}}</ion-note>
    <ion-multi-picker  item-end *ngIf="isEditMode" style="color:darkgray" id="gender" [(ngModel)]="info.gender" [multiPickerColumns]="genders" doneText="确定" cancelText="取消"></ion-multi-picker>
  </ion-item>

  <ion-item>  
    <ion-icon name="body" ios="ios-body-outline" md="ios-body-outline" item-start color="primary"></ion-icon>
    <ion-label>身高</ion-label>
    <ion-note item-end *ngIf="!isEditMode">{{info.height}}</ion-note>
    <ion-multi-picker  item-end *ngIf="isEditMode" style="color:darkgray" id="height" [(ngModel)]="info.height" [multiPickerColumns]="heights" doneText="确定" cancelText="取消"></ion-multi-picker>
  </ion-item>

  <ion-item>  
    <ion-icon name="speedometer" ios="ios-speedometer-outline" md="ios-speedometer-outline" item-start color="primary"></ion-icon>
    <ion-label>体重</ion-label>
    <ion-note item-end *ngIf="!isEditMode">{{info.weight}}</ion-note>
    <ion-multi-picker  item-end *ngIf="isEditMode" style="color:darkgray" id="weight" [(ngModel)]="info.weight" [multiPickerColumns]="weights" doneText="确定" cancelText="取消"></ion-multi-picker>
  </ion-item>

  <ion-item>  
    <ion-icon name="calendar" ios="ios-calendar-outline" md="ios-calendar-outline" item-start color="primary"></ion-icon>
    <ion-label>生日</ion-label>
    <ion-note item-end *ngIf="!isEditMode">{{info.birthday}}</ion-note>
    <ion-datetime item-end *ngIf="isEditMode" style="color:darkgray" displayFormat="YYYY-MM-DD" [(ngModel)]="info.birthday"  doneText="确定" cancelText="取消"></ion-datetime>
  </ion-item>

</ion-list>
</ion-content>
